<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.5);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }
        .main{
            background-color: #fff;
            width: 300px;
            height: 200px;
            padding: 30px;
        }
    </style>
</head>
<body>
    <input class="nickname" type="text" placeholder="昵称"> <br> <br>
    <textarea class="comment" placeholder="请输入评论"></textarea> <br>
    <button class="message">留言</button>

    <ul class="list">
        <!-- <li>
            <h4>2022-4-21 12:12:12</h4>
            <h3>昵称</h3>
            <p>留言的内容</p>
            <div class="reply">
                <p>回复的内容1</p>
            </div>
            <button>回复</button>
            <button>删除</button>
        </li> -->
    </ul>

    <div class="cover">
        <div class="main">
            <p>请输入回复</p>
            <textarea class="ans" placeholder="请输入评论"></textarea> <br>
            <button class="confirm">确认</button>
            <button class="cancel">取消</button>
        </div>
    </div>

    <script>


        // 总结
        //   封装函数
        //     获取元素  get
        //     日期格式化  formatDate
        //     补零     add0
        //     倒计时  djs   disabled

        // 分析页面功能
        //    创建留言  封装了函数creteMsg()
        //         点击事件中获取的用户名和内容访问不到   --- 提取了参数
        //    删除留言  必须在留言之后
        //        只能删除一次？？   换一种方式绑定  通过oLi查找删除按钮    也可以循环绑定
        //    回复留言
        //        bug???  
        //            必须在点击回复的时候找到回复留言的地方   oReply
        //            回复和确认是两个事件函数  访问不到    oReply 提升为全局变量





        var oName = get('.nickname') ;
        var oComment = get('.comment') ;
        var oMsg = get('.message') ;
        var oUl = get('.list') ;
        var oCover = get('.cover') ;
        var oCancel = get('.cancel') ;
        var oConfirm = get('.confirm') ;


        var oReply ;

        // 实现留言

        oMsg.onclick = function() {
            // 获取昵称和内容
            var name = oName.value ;
            var com = oComment.value ;
            // 判断  
            if(name && com) {
                // 实现倒计时  --- 封装函数  djs()
                djs(oMsg , 10) ;
                // 创建留言  --- 封装函数
                createMsg(name , com) ;
                

            } else {
                alert('输入不能为空')
            }

        }



        // 名称和内容也就是Name和com属于上面事件中的局部变量  访问不到
        //    通过参数的方式来接收
        function createMsg(name , com) {
            var oLi = document.createElement('li') ;
            // 
            oLi.innerHTML = `
                <h4>${formatDate()}</h4>
                <h3>${name}</h3>
                <p>${com}</p>
                <div class="reply">
                    
                </div>
                <button class="answer">回复</button>
                <button class="del">删除</button>
            `
            oUl.appendChild(oLi) ;   // 已留言

            // 删除
            var oDel = oLi.querySelector('.del') ;
            oDel.onclick = function() {
                // 删除父元素 li
                oDel.parentElement.remove() ;
            }

            // 回复
            var oAns = oLi.querySelector('.answer') ;
            oAns.onclick = function() {
                oCover.style.display = 'flex' ;

                // 在点击回复的时候就要查找回复留言的地方
                oReply = oAns.previousElementSibling ;
            }


            // 取消回复
            oCancel.onclick = function() {
                oCover.style.display = 'none' ;
            }


            // 确认回复
            oConfirm.onclick = function() {
                // 获取回复的内容
                var content = get('.ans').value ;
                if(content) {
                    var oP = document.createElement('p') ;
                    oP.innerHTML = content ;
                    // 插入
                    // var oReply = get('.reply') ;   // 始终只能找到第一个  
                    oReply.appendChild(oP) ;
                }
                oCover.style.display = 'none' ;

            }


        }





        function formatDate() {
            var d = new Date() ;
            var y = d.getFullYear() ;
            var m = d.getMonth() + 1 ;
            var day = d.getDate() ;
            var h = d.getHours() ;
            var min = d.getMinutes() ;
            var s = d.getSeconds() ;
            return y + '-' + add0(m) + '-' + add0(day) + ' ' + add0(h) + ':' + add0(min) + ':' + add0(s)
        }


        function add0(n) {
            return n < 10 ? '0' + n : n ;
        }



        // 倒计时
        function djs(ele , count) {
            ele.disabled = true ;
            // var count = 10 ;
            ele.innerHTML = count + 's后可以继续留言' ;
            var t = setInterval(function() {
                ele.innerHTML = --count + 's后可以继续留言' ;
                if(count === 0) {
                    clearInterval(t) ;
                    ele.disabled = false;
                    ele.innerHTML = '留言'
                }
            } , 300)
        }





        function get(s) {
            return document.querySelector(s) ;
        }

    </script>
</body>
</html>